<template>
<div  :class="['BottomPanel',showOrHideCls]">
  <div class="view">
    <div class="btnDiv">
      <div :class="['paiBtn',(store.state.routerPath===Enum.paiBanpath?'paiBtn1':'paiBtn0')]" @click="btnClick(Enum.paiBanpath)"></div>
      <div :class="['recdBtn',(store.state.routerPath===Enum.myRecdpath?'recdBtn1':'recdBtn0')]"  @click="btnClick(Enum.myRecdpath)"></div>
      <div :class="['myBtn',(store.state.routerPath===Enum.myIndexpath?'myBtn1':'myBtn0')]"  @click="btnClick(Enum.myIndexpath)"></div>
    </div>
  </div>
</div>
<div :class="['topPanel']">
  <div class="backBtn" @click="backBtnClick()"></div>
</div>
</template>



<style scoped>
.BottomPanel{
  position: fixed;bottom: 0rem;background-color: #FFFFFF;border-radius:0.2rem 0.2rem 0 0;
 /* background-image: url("../../assets/img/bottom/bg.png");*/
  width: 7.5rem;height: 1rem;
}
.view{

}
.btnDiv{
 position: relative; width: 5.5rem;top: 0.3rem;left: 1rem;
  display:flex;display: -webkit-flex;justify-content:space-between;
}
.btnDiv .paiBtn{
  position: relative;width: 0.56rem;height: 0.56rem;
}
.btnDiv .paiBtn0{
   background-image: url("../../assets/img/bottom/paiBtn0.png");
}
.btnDiv .paiBtn1{
  background-image: url("../../assets/img/bottom/paiBtn1.png");
}

.btnDiv .recdBtn{
  position: relative;width:0.56rem;height: 0.56rem;
}
.btnDiv .recdBtn0{
  background-image: url("../../assets/img/bottom/recdBtn0.png");
}
.btnDiv .recdBtn1{
  background-image: url("../../assets/img/bottom/recdBtn1.png");
}

.btnDiv .myBtn{
  position: relative;width: 0.56rem;height: 0.56rem;
}
.btnDiv .myBtn0{
  background-image: url("../../assets/img/bottom/myBtn0.png");
}
.btnDiv .myBtn1{
  background-image: url("../../assets/img/bottom/myBtn1.png");
}

.topPanel{
  position: fixed;top: 0rem;display: none;
  background-image: url("../../assets/img/bottom/topBg.png");width: 7.5rem;height: 1.54rem;
}
.topPanel .backBtn{
  position:relative;background-image: url("../../assets/img/bottom/backBtn.png");width: 0.6rem;height: 0.6rem;    top: 0.7rem;
  left: 0.2rem;
}
</style>
<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import { useRouter } from 'vue-router';
import layPicker from "@/gamejs/lay-picker";
let store = useStore();
let clsid=winApp.getClsId();
let router = useRouter();
/*组件挂载完成后执行的函数；*/
onMounted(() => {

  console.log("BottomPanel onMounted  ");

});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  // winApp.deleteNotification(clsid);
  console.log("BottomPanel onUnmounted  卸载组件实例后  ",clsid);
});

function btnClick(pathurl){
  console.log("BottomPanel btnClick    ");
  router.push({ path:pathurl, query: {t: (new Date()).getTime()}});
}
function backBtnClick(){
  console.log("BottomPanel backBtnClick    ");
  //router.back();
  router.push({ path:Enum.paiBanpath, query: {t: (new Date()).getTime()}});
}
//挂载状态
let showView_status=computed(()=>{return store.state.view.routerPath;});
//显示隐藏class
let showOrHideCls=ref('');
watch(showView_status,(newValue,oldValue)=>{
  console.log("DateSelectionPanel watch  showView_status ",newValue);
  if(newValue===Enum.paiBanpath || newValue===Enum.myRecdpath || newValue===Enum.myIndexpath) {//显示
    showOrHideCls.value = 'viewShow';


  }else{//隐藏
    showOrHideCls.value = 'viewHide';
  }
  showOrHideCls.value = 'viewShow';
});
</script>
